.out{
    /* animation-duration: 2s;
    animation-name: model; */
}

.model {
    border: 1px solid gray;
    padding: 10px;
    margin: 10px;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 2px 1px rgba(79, 78, 76, 0.2);
    animation: appear 2s alternate both;
    animation-timeline: view(100% 0);
}


/* 贴画 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: skewX(30deg);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 粘贴 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: skew(30deg, 20deg);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: translateX(10px) rotate(10deg) translateY(5px);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 旋转 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: rotate(0.5turn);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: rotate3d(1, 2, 3, 10deg);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 缩小 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: scale(2, 0.5);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 上推 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(3in);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 滑出 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: translateX(20em);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* 平滑 */
@keyframes appear {
    from {
      opacity: 0;
      transform: translate(12px, 50%);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
}

/* 旋转 */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: matrix(1, 2, 3, 4, 5, 1);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */
/* @keyframes appear {
    from {
      opacity: 0;
      transform: skewY(0.7rad);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
} */

/* @keyframes model{
    
    from {
        padding-top: 100px;
        height: 0%;
    }
    to {
        padding-top: 0px;
        height: 100%;
    }
} */
.stap{
  margin:50px 0px;
}
.img{
    width: 50px;
    height: 50px;
    border-radius:5px;
}

.img_box{
    display: inline-block;
    padding: 10px;
    /* display: flex; */
}

.order_message{
    text-align: right;
    padding: 5px 5px 0px 10px;
}

.user_state{
    background-color: rgba(0, 0, 0, 0);
    font-size: 16px;
    border:0px solid black;
    border-radius: 6px;
    padding:2px;
    margin:5px;
    box-shadow: 2px 2px 1px 1px rgba(199, 145, 39, 0.2);
}

.order_state{
    background-color: rgba(0, 0, 0, 0);
    font-size: 16px;
    border:0px solid black;
    border-radius: 6px;
    padding:2px;
    margin:5px;
    box-shadow: 2px 2px 1px 1px rgba(199, 145, 39, 0.2);
}
.fontstate{
    display: flex;
    justify-content: space-between;
    padding-bottom:10px;
}
.button{
    background-color: rgba(0, 0, 0, 0);
    font-size: 16px;
    border:1px solid gray;
    border-radius: 6px;
    padding:2px;
    margin:5px;
    box-shadow: 5px 5px 2px 1px rgba(199, 145, 39, 0.2);
}
hr{
    margin:5px;
}
.tab{
  /* position: fixed;
  top: 00px; */
}
.rv-tabs--line .rv-tabs__wrap, .rv-tabs--capsule .rv-tabs__wrap{
  position: fixed;
  top: 0px;
}
